<template>
  <div class="box">
    <el-card class="card">
      <el-row>
        <el-col :span="24">
          <el-form ref="ruleForm" :model="form" :rules="rules" label-width="150px">
            <el-form-item label="分类商品" prop="name">
              <el-input
                v-model="form.name"
                class="input"
                placeholder="请输入分类商品"
                style="width: calc(100% - 100px)"
              />
            </el-form-item>
<!--            <el-form-item>-->

<!--              <el-radio-group v-model="radio">-->
<!--                <el-radio label="1">开</el-radio>-->
<!--                <el-radio label="2">关</el-radio>-->
<!--              </el-radio-group>-->
<!--            </el-form-item>-->
            <el-form-item v-if="isEditOrDetailId" label="是否开启分类商品">
              <el-radio-group v-model="isopenId">
                <el-radio label="1">开</el-radio>
                <el-radio label="2">关</el-radio>
              </el-radio-group>

            </el-form-item>
            <el-form-item label="备注" prop="remarks">
              <el-input
                v-model="form.remarks"
                style="width: calc(100% - 100px)"
                class="input"
                type="textarea"
                :rows="10"
                placeholder="请输入备注"
              />
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <div class="button">
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          <el-button type="primary" @click="isCheck()">提交</el-button>
          <el-button v-if="queryBack" type="primary" @click="goList">返回列表</el-button>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { CateUpdate, getCateDetail, goodsCategoryAdd } from '../../api/cate'

export default {
  name: 'CateAdd',
  data() {
    return {
      form: {
        remarks: '',
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入分类商品', trigger: 'blur' }

        ],
        remarks: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      },
      queryBack: '',
      isEditOrDetailId: '',
      isopenId: '1', // 商品开启id
      radio: '1'
    }
  },
  created() {
    this.queryBack = this.$route.query.back
    if (this.$route.query.id) {
      this.isEditOrDetailId = this.$route.query.id
      // this.isopenId = this.$route.query.isopen
      console.log('点编辑传过来的id', this.isEditOrDetailId)
      this.getCateDetail() // 获取详情
    }
  },
  methods: {
    // 判断是新增还是编辑
    isCheck() {
      if (this.isEditOrDetailId) {
        this.goodsCategoryEdit()
      } else {
        this.goodsCategoryAdd()
      }
    },

    // 新增分类商品
    goodsCategoryAdd() {
      const data = this.form
      goodsCategoryAdd(data).then((res) => {
        // eslint-disable-next-line eqeqeq
        if (res.code == 0) {
          console.log('新增分类商品成功', res)
          this.$message.success('操作成功!')
          this.$router.push('/cate/list')
        }
      })
    },

    // 提交编辑商品
    goodsCategoryEdit() {
      const data = {
        id: this.isEditOrDetailId,
        isopen: this.isopenId,
        name: this.form.name,
        remarks: this.form.remarks
      }
      CateUpdate(data).then(res => {
        console.log('提交编辑商品', res)
        this.$message.success('操作成功!')
        this.$router.push('/cate/list')
      })
    },

    // 重置
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    // 返回列表
    goList() {
      this.$router.go(-1)
    },

    // 分类商品详情
    getCateDetail() {
      const data = {
        id: this.isEditOrDetailId
      }
      getCateDetail(data).then(res => {
        // eslint-disable-next-line eqeqeq
        if (res.code == 0) {
          console.log(res)
          this.form = res.data
          // this.isopenId = String(res.data.isopen)
          this.isopenId = res.data.isopen.toString()
          console.log('5555', this.isopenId)
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
  .box {
    padding: 20px;

    .card {
      margin-bottom: 20px;
      /*width: 80%;*/
    }

    /*底部按钮*/

    .button {
      margin-bottom: 30px;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }
  }

</style>
